<template>
  
  <div class="app-container">
    <el-card shadow="always">

      <div v-if="reportDetail.reject!==undefined&&reportDetail.reject!==''">
            驳回原因：
            <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入内容"
            v-model="reportDetail.reject" :disabled="true">
            </el-input>
       </div>      
     <div>
       <el-row type="flex" class="app-container" :gutter="35">
          报告标题:
          <el-col :span="20">
             <el-input v-model="reportDetail.reportTitle" placeholder="请输入报告标题"></el-input>
          </el-col>
        </el-row>
    </div>
    内容类型：
        <el-select size="20" v-model="reportDetail.contentType" @change="changeType" placeholder="请选择">
            <el-option
              v-for="item in contentOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select><br>
          <div>
           报告内容：
            <div v-if="reportDetail.contentType===0">
              <el-row type="flex" class="app-container" :gutter="40">
                  <el-col :span="24">
                    <tinymce :height="300" v-model="reportDetail.content"></tinymce>
                  </el-col>
                </el-row>
            </div>    
          </div>
          <div v-if="reportDetail.contentType===1">
            <div v-if="contentType===1">
            文档：
            <a :href="reportDetail.fileUrl" :download="templateName" ><el-button icon="el-icon-document" circle></el-button></a>
            </div>
            <el-row :gutter="20">
                 <el-col :span="10">
                  <div>
                    <el-button type="primary"  ><a :href="templateUrl">下载模板</a></el-button>
                  </div>
                 </el-col>
                <el-col :span="10">
                <div>
                  <el-upload
                      class="upload-demo"
                      :action="actionUrl"
                      :on-success="handleAvatarSuccess"
                      :before-remove="beforeRemove"
                      :before-upload="beforeAvatarUpload"
                      multiple
                      :limit="1"
                      accept=".doc,.docx">
                      <el-button size="small" type="primary" >点击上传</el-button>
                      <div slot="tip" class="el-upload__tip">只能上传doc/docx文件，且不超过500kb</div>
                  </el-upload>
                </div>
                </el-col>
              </el-row>
          </div>
    <div style="text-align:center"> 
    <el-button class="" type="primary" @click="editReport()" plain> 提交修改 </el-button>
    </div>
    </el-card>
  </div>
</template>
<script>
import tinymce  from '@/components/Tinymce'
import { getReport,editReport } from '@/api/report'
import { getReportResult } from '@/api/result'
import { getReportTemplate} from '@/api/setting'
export default {
    components: {
        tinymce 
    },
  data() {
    return {
      actionUrl:process.env.VUE_APP_BASE_UPLOAD,
      params:{
        reportId:'',
      },
      options: [{
          value: '0',
          label: '周报'
        }, {
          value: '1',
          label: '月报'
        }, {
          value: '2',
          label: '中期报告'
        }, {
          value: '3',
          label: '实训论文'
        }],
        reportDetail:{
          fileUrl:''

        },
        contentOptions: [{
          value: 0,
          label: '在线填写'
        }, {
          value: 1,
          label: '上传文件'
        }],
        templateUrl:'http://localhost:8084/upload/导入学生模板_实习实训管理系统.xlsx',
        contentType:0,
        reportTemplate:{
          weekTemplate:'',
          monthTemplate:'',
          centreTemplate:'',
          finalTemplate:''
        }
    }
  },
  //页面打开时执行的方法
  created() {
    this.params.reportId = this.$route.query.reportId;
    this.getReport();
    this.getReportTemplate()

  },
   methods: {
      editReport() {
        if(this.reportDetail.contentType===1){
          this.reportDetail.content=''
        }else{
           this.reportDetail.fileUrl=''
        }
         if(this.reportDetail.reportStatus===1){
           this.reportDetail.reportStatus=0
          this.reportDetail.reject=''
        }
        editReport(this.reportDetail).then(()=>{
            this.$message({
              type: 'success',
              message: '修改报告成功!'
            })
            //跳转我的报告列表
            this.$router.push("/myReport")
            }
          ).catch(err=>{
            this.$message({
              type: 'success',
              message: '修改报告失败!'
            })
            })

      },
      async getReport(){
          let res = await getReport(this.params);
          this.reportDetail =res.bean;
          this.contentType = res.bean.contentType;
      },
      handleAvatarSuccess(res, file) {
        this.reportDetail.fileUrl = res.bean.url
      },
      handleRemove(file, fileList) {
        this.reportDetail.fileUrl=''
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传文档大小不能超过 2MB!');
        }
        return  isLt2M;
      },
      async getReportTemplate() {
        let res = await getReportTemplate()
        this.reportTemplate = res.bean
            if(this.reportDetail.reportType===0){
              this.templateUrl = this.reportTemplate.weekTemplate
            }else if(this.reportDetail.reportType===1){
              this.templateUrl = this.reportTemplate.monthTemplate
            }else if(this.reportDetail.reportType===2){
              this.templateUrl = this.reportTemplate.centreTemplate
            }else if(this.reportDetail.reportType===3){
              this.templateUrl = this.reportTemplate.finalTemplate
            }
    }
   }
}
</script>
